<template>
  <div :style="{transform: 'scale(' + scale + ')'}" @contextmenu.stop.prevent="checkState">
    <svg transform = "scale(0.8)" v-if="state == 0" width="50" height="48">
      <g>
        <!-- 硬压板 -->
        <g transform="rotate(-33,13,12)">
          <polyline points="2,3 16,3 16,48 2,48" style="fill: #c5c5c5"></polyline>
          <circle cx="12" cy="10" r="6" style="fill: #050348"></circle>
          <polyline points="3,20 15,20 15,32 3,32" style="fill: #FFD700"></polyline>
        </g>
        <circle cx="25" cy="38" r="6" style="fill: #050348"></circle>
        <circle cx="25" cy="10" r="6" style="fill: #FFD700"></circle>
        <circle cx="37" cy="38" r="6" style="fill: #FFD700"></circle>
      </g>
    </svg>
    <svg width="40" height="48" v-else>
      <g transform="translate(10,0)">
        <polyline points="2,3 16,3 16,48 2,48" style="fill: #c5c5c5"></polyline>
        <circle cx="9" cy="10" r="6" style="fill: #c92a2a"></circle>
        <polyline points="3,20 15,20 15,32 3,32" style="fill: #c92a2a"></polyline>
        <circle cx="9" cy="41" r="6" style="fill: #c92a2a"></circle>
      </g>
    </svg>
  </div>
</template>

<script>
    import {submitOperateRecord} from "@/api/api";

    export default {
        name: "YingYaBan",
        props: {
            state:{
                type:Number
            },
          scale: {
              type: Number,
              default: 1
            },
            info:{
                type:Object,
                default: function (){
                    return {
                    }
                }
            }
        },
        components: {
        },
        methods: {
            checkState() {
                this.desc=this.$store.state.operDescData.find(item=>item.type==='jc'&&item.comType==='压板').desc;
                this.desc=this.desc.replace('jgName',this.info.jg_name).replace('devName',this.info.page_position+"："+this.info.state_desc).replace('state', (Number(this.state) === 0 ? "退出" : "投入"))
                submitOperateRecord( {log_desc:this.desc})
            }
        }
    }
</script>

<style scoped>
    .close {
        width: 100vw;
        background-color: #173873;
        height: 60px;
    }
    .open{
        font-size: 20px;
    }
</style>
